<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" style="margin-top: 20px">
      <el-form-item label="资讯名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="所属党派">
        <el-select v-model="form.region" placeholder="请选择所属党派">
          <el-option label="中共党员" value="shanghai"></el-option>
          <el-option label="民革" value="beijing"></el-option>
          <el-option label="民盟" value="beijing"></el-option>
          <el-option label="民建" value="beijing"></el-option>
          <el-option label="民进" value="beijing"></el-option>
          <el-option label="农工" value="beijing"></el-option>
          <el-option label="致公" value="beijing"></el-option>
          <el-option label="九三" value="beijing"></el-option>
          <el-option label="台盟" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="编辑人员">
        <el-input v-model="form.person"></el-input>
      </el-form-item>

      <div class="home">
        <a style="font-size: 14px;color: #606266; font-weight: bold;">资讯内容</a>
        <div id="demo1" style="margin-top: 10px"></div>
      </div>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即发布</el-button>
      </el-form-item>
    </el-form>


  </div>

</template>

<script>
export default {
  name: "information"
}
</script>

<script>
import wangEditor from 'wangeditor'
export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        editor: null,
        editorData: ''
      }
    }
  },
  mounted() {
    const editor = new wangEditor(`#demo1`)
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml
    }
    editor.config.uploadImgShowBase64 = true
    editor.config.uploadVideoServer = '/api/upload-video'
    editor.config.showLinkVideo = false
    editor.config.excludeMenus = [
      'video',
      "code"
    ]
    // 创建编辑器
    editor.create()
    this.editor = editor
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    }
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>


<style scoped lang="scss">
.home {
  width: 1200px;
  margin: 10px 20px 10px 10px;
  position: relative;
  .btn {
    position: absolute;
    right: 0;
    top: 0;
    padding: 5px 10px;
    cursor: pointer;
  }
  h3 {
    margin: 30px 0 15px;
  }
}
</style>
